<template>
  <div class="warp">
    <common-head :title="title" />
    <!-- 详情页轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="shipin">
      <img
        src="https://img0.baidu.com/it/u=786395011,601328801&fm=26&fmt=auto&gp=0.jpg"
        class="ship"
      />视频
    </div>
    <div class="pic">图片</div>
    <div class="item-info">
      <div class="Product-price">
        <p>￥{{ basicInfo.minPrice }}</p>
        <span>即将恢复￥99,99</span><i>已销售1.1W</i>
      </div>

      <div class="zhekou">卷满100-20·卷满300-50会员享7折</div>
      <hr />
      <h5>
        {{ basicInfo.name }}好吃好玩应有尽有，只有你想不到，没有我卖不了的东西
      </h5>
    </div>
    <div class="content" v-html="content"></div>
    <!-- 轮播图结束 -->
    <!-- 商品底部导航栏 -->
    <van-goods-action>
      <van-goods-action-icon
        @click="$router.push('/home')"
        icon="home-o"
        text="首页"
      />
      <van-goods-action-icon
        :badge="$store.state.cart.items.length"
        @click="$router.push('/cart')"
        icon="cart-o"
        text="购物车"
      />
      <van-goods-action-button
        color="#303030"
        @click="showSku(0)"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button color="#FF734C"   @click="showSku(1)" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品底部导航栏 -->
    <!-- 商品规格弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      round
      closeable
      :style="{ height: '40%' }"
    >
      <div style="padding: 15px">
        <van-card
          :num="sku.number"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.number"/>
            <van-button @click="confirmItem" size="large" color="#ff734c">确定</van-button>
          </template>
        </van-card>
      </div>
    </van-popup>
  </div>
</template> 

<script>
import CommonHead from "_components/CommonHead";
import { fetchDetail,addCart } from "_api";
import { getToken } from '_utils'
import { Toast } from 'vant';
export default {
  data() {
    return {
      title: "京东商城",
      basicInfo: {}, //商品基础信息
      pics: [],
      content: "",
      sku: {
        number: 1,
      }, //商品规格
      show: false,
      action:0 //0加入购物车 1提交到订单页
    };
  },
  created() {
    this.fetchItemDetail(); //请求id数据
  },
  methods: {
    confirmItem(){//点击商品规格确定按钮
        if(this.action === 0){
          addCart({
            goodsId:this.sku.id,
            number:this.sku.number,
            token:getToken()
          }).then(res => {
              if (res.data.code === 0){
                 this.$store.commit('cart/set_items', res.data.data.items) 
                Toast({
                  type:'success',
                  duration:1000,
                  message:'加入购物车成功',
                  onClose:() => {
                    this.show=false
                  }
                })
              }
          })
        }else{
          alert('提交到订单页')
        }
    },
    showSku(n){
      this.show = true
      this.action= n  //给showSku增加参数传参
    },
   fetchItemDetail() {
      fetchDetail({
        id:this.$route.params.id //获取动态id
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo;
          this.pics = res.data.data.pics;
          this.content = res.data.data.content;
          this.title = this.basicInfo.name;
          this.sku = {
            ...this.sku, //自己的number
            ...res.data.data.basicInfo, //  basicInfo基础信息
          };
        }
      });
    },
  },
  components: {
    CommonHead,
  },
};
</script>

<style lang="scss" scoped>
.my-swipe {
  img {
    width: 100%;
  }
}
.warp {
  padding-bottom: 20px;
}
.shipin {
  top: -40px;
  left: -30px;
  text-align: center;
  position: relative;
}
.ship {
  width: 3%;
  padding-right: 2px;
}
.item-info > h5 {
  margin-top: 5px;
  font-size: 25px;
}
.pic {
  border: 1px solid orange;
  border-radius: 10px;
  color: white;
  background: chocolate;
  top: -60px;
  left: 240px;
  position: relative;
  width: 2.9703rem;
  text-align: center;
  height: 1.2703rem;
}
.Product-price {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 1.7027rem;
}
.Product-price > i {
  color: #999;
  font-size: 0.9243rem;
}
.Product-price > span {
  font-size: 0.8784rem;
  padding: 2px;
  /*   width: 6.7027rem; */
  color: red;
  font-weight: 400;
  margin-right: 135px;
  border: 1px solid red;
  border-radius: 0px 10px 10px 10px;
}
.Product-price > p {
  font-size: 1.4rem;
  font-weight: 600;
  color: red;
  font-family: JDZH-Regular;
}
.zhekou {
  margin-top: 5px;
  width: 16.5405rem;
  padding-left: 10px;
  border-radius: 3px;
  border: 1px solid red;
  color: red;
}
.item-info {
  margin-top: -30px;
}
.content {
  /deep/ img {
    display: block;
    width: 100%;
  }
}
</style>